<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-select v-model="reqData.year" placeholder="请选择年份">
        <el-option key="-1" label="全部" value="-1"></el-option>
        <el-option
          v-for="item in yearList"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
      <el-select v-model="reqData.matchType" placeholder="请选择匹配类型">
        <el-option key="-1" label="全部" value="-1"></el-option>
        <el-option
          v-for="(item,index) in matchTypeList"
          :key="index"
          :label="item"
          :value="index">
        </el-option>
      </el-select>
      <el-input placeholder="学生姓名" v-model="reqData.name" style="width: 200px;"></el-input>
      <el-input placeholder="学生身份证" v-model="reqData.idcard" style="width: 200px;"></el-input>
      <el-button type="primary" icon="el-icon-search" @click.native.prevent="handleSearch">搜索</el-button>
    </div>
    <el-table border stripe highlight-current-row style="width: 100%;" :data="listData" :empty-text="emptyText">
      <el-table-column label="匹配年份" prop="matchUniversityYear"></el-table-column>
      <el-table-column label="匹配类型" prop="matchTypeShow"></el-table-column>
      <el-table-column label="匹配大学" width="120" prop="universityName"></el-table-column>
      <el-table-column label="匹配专业" width="120" prop="matchUniversityMajor"></el-table-column>
      <el-table-column label="学生姓名" prop="userName"></el-table-column>
      <el-table-column label="学生身份证" width="170" prop="userIdcard"></el-table-column>
      <el-table-column label="学生联系电话" width="120" prop="userPhone"></el-table-column>
      <el-table-column label="学生总分数" prop="matchUniversityScore"></el-table-column>
      <el-table-column label="创建时间" width="140" prop="matchUniversityCreated"></el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination
        background
        :pager-count="pagerCount"
        :page-size="reqData.perPage"
        :current-page="reqData.curPage"
        layout="prev, pager, next"
        @current-change="pageChange"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { getList } from '@/api/match_university'
  import { errorMsg, successMsg } from '@/utils/my'

  export default {
    inject: ['reload'],
    data() {
      return {
        reqData: {
          name: '',
          idcard: '',
          year: '',
          matchType: '',
          curPage: 1,
          perPage: 20
        },
        pagerCount: 13,
        total: 0,
        listData: [],
        loading: true,
        emptyText: '暂无任何数据',
        yearList: [],
        matchTypeList: ['考后', '考前']
      }
    },

    created() {
      this.genYearList()
      this.fetchData()
    },

    methods: {

      pageChange(p) {
        this.reqData.curPage = p
        this.fetchData()
      },

      fetchData() {
        let that = this
        that.loading = true
        let tmpData = JSON.parse(JSON.stringify(that.reqData))
        tmpData.year = tmpData.year.length <= 0 ? 0 : parseInt(tmpData.year)
        tmpData.matchType = tmpData.matchType.length <= 0 ? 0 : parseInt(tmpData.matchType) + 1
        getList(tmpData).then(res => {
          that.loading = false
          that.total = res.data.total
          that.listData = res.data.list
        })
      },

      handleSearch() {
        this.reqData.curPage = 1
        this.fetchData()
      },

      genYearList() {
        const that = this
        let d = new Date(),
            curYear = d.getFullYear()
        for (let i = 2000; i <= curYear; i++) {
          that.yearList.push(i)
        }
      }

    }
  }
</script>

<style>
  .filter-container {
    margin-bottom: 10px;
  }

  .pager {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
</style>
